<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test商城</title>
  <link rel="shortcut icon" href="./imgs/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2960521_rqz39d8moo.css">
  <link rel="stylesheet" href="./css/topnav.css">
  <link rel="stylesheet" href="./css/header.css">
  <link rel="stylesheet" href="./css/banner.css">
  <link rel="stylesheet" href="./css/banner2.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/footer.css">
  <link rel="stylesheet" href="./css/rm.css">
</head>

<body>
  <!-- 顶部导航栏开始 -->
  <div class="topnav">
    <!-- 版心部分 -->
    <div class="type-page  clearfix">

      <!-- 左边的导航区域 -->
      <ul class="fl topnav-menu">
        <li class="fl"><a href="">小米商城</a></li>
        <li class="fl"><a href="">MIUI</a></li>
        <li class="fl"><a href="">IoT</a></li>
        <li class="fl"><a href="">云服务</a></li>
        <li class="fl"><a href="">天星数科</a></li>
        <li class="fl"><a href="">有品</a></li>
        <li class="fl"><a href="">小爱开放平台</a></li>
        <li class="fl"><a href="">企业团购</a></li>
        <li class="fl"><a href="">资质证照</a></li>
        <li class="fl"><a href="">协议规则</a></li>
        <li class="fl"><a href="">下载app</a></li>
        <li class="fl"><a href="">智能生活</a></li>
        <li class="fl"><a href="">Select Location</a></li>
      </ul>

      <!-- 右边功能区域 -->
      <div class="fr">
        <!-- 除购物车外 -->
        <ul class="fl topnav-menu clearfix">
          <li class="fl"><a href="">登录</a></li>
          <li class="fl"><a href="">注册</a></li>
          <li class="fl"><a href="">消息通知</a></li>
        </ul>

        <!-- 购物车 -->
        <div class="fr topnav-car">
          <!-- 购物车主体 -->
          <a href="#" class="car-link">
            <i class="iconfont i-car"></i>
            <span>购物车 (0)</span>
          </a>
          <!-- 弹窗 -->
          <div class="detail">
            购物车中还没有商品，赶紧选购吧！
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 顶部导航栏结束 -->


  <!-- 页头开始 -->
  <div class="header">
    <div class="type-page clearfix">
      <!-- logo -->
      <a class="header-logo fl">
        <h1>test商城</h1>
      </a>
      <!-- 菜单 -->
      <div class="header-menu fl">
        <a class="fl" href="">小米手机</a>
        <a class="fl" href="">红米手机</a>
        <a class="fl" href="">电视</a>
        <a class="fl" href="">笔记本</a>
        <a class="fl" href="">平板</a>
        <a class="fl" href="">家电</a>
        <a class="fl" href="">路由器</a>
        <a class="fl" href="">服务</a>
        <a class="fl" href="">社区</a>

        <!-- 二级菜单（写这里方便作为a的元素选中block） -->
        <div class="header-submenu">
          <div class="type-page clearfix">
            <a href="" class="fl">
              <!-- 产品 -->
              <div class="header-product">
                <img src="./imgs/product.webp" alt="">
              </div>
              <!-- 名字 -->
              <div class="header-name">Redmin Note 11 5G</div>
              <!-- 价格 -->
              <div class="header-price">1199起</div>
            </a>

            <a href="" class="fl">
              <!-- 产品 -->
              <div class="header-product">
                <img src="./imgs/product.webp" alt="">
              </div>
              <!-- 名字 -->
              <div class="header-name">Redmin Note 11 5G</div>
              <!-- 价格 -->
              <div class="header-price">1199起</div>
            </a>

            <a href="" class="fl">
              <!-- 产品 -->
              <div class="header-product">
                <img src="./imgs/product.webp" alt="">
              </div>
              <!-- 名字 -->
              <div class="header-name">Redmin Note 11 5G</div>
              <!-- 价格 -->
              <div class="header-price">1199起</div>
            </a>

            <a href="" class="fl">
              <!-- 产品 -->
              <div class="header-product">
                <img src="./imgs/product.webp" alt="">
              </div>
              <!-- 名字 -->
              <div class="header-name">Redmin Note 11 5G</div>
              <!-- 价格 -->
              <div class="header-price">1199起</div>
            </a>

            <a href="" class="fl">
              <!-- 产品 -->
              <div class="header-product">
                <img src="./imgs/product.webp" alt="">
              </div>
              <!-- 名字 -->
              <div class="header-name">Redmin Note 11 5G</div>
              <!-- 价格 -->
              <div class="header-price">1199起</div>
            </a>

            <a href="" class="fl">
              <!-- 产品 -->
              <div class="header-product">
                <img src="./imgs/product.webp" alt="">
              </div>
              <!-- 名字 -->
              <div class="header-name">Redmin Note 11 5G</div>
              <!-- 价格 -->
              <div class="header-price">1199起</div>
            </a>
          </div>
        </div>
      </div>
      <!-- 搜索区域 -->
      <form class="header-search fr">
        <input type="text" class="fl" placeholder="手机" />
        <button class="header-searchicon fl">
          <i class="iconfont i-fangdajing"></i>
        </button>
        <div class="header-suggest">
          <a href="">全部商品</a>
          <a href="">手机</a>
          <a href="">耳机</a>
          <a href="">小米平板5 pro</a>
          <a href="">加速器</a>
          <a href="">笔记本</a>
        </div>
      </form>
    </div>
  </div>
  <!-- 页头结束 -->

  <!-- 横幅开始 -->
  <div class="banner type-page">
    <!-- 轮播图 -->
    <a href="" class="banner-cover">
      <img src="./imgs/banner.jpeg" alt="">
    </a>

    <!-- 左键 -->
    <div class="banner-pointer banner-pointer-left">
      <i class="iconfont i-left"></i>
    </div>

    <!-- 右键 -->
    <div class="banner-pointer banner-pointer-right">
      <i class="iconfont i-right"></i>
    </div>

    <!-- 轮播小点 -->
    <div class="banner-dots">
      <span class="fl"></span>
      <span class="banner-dots-selected fl"></span>
      <span class="fl"></span>
    </div>

    <!-- 横幅侧边菜单 -->
    <ul class="banner-menu">
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">手机</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/mobile.webp" alt="" class="fl" />
            <span class="fl">Note 11 Pro 系列</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">电视</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/tv.webp" alt="" class="fl" />
            <span class="fl">Redmi 智能电视X65 2022款</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">笔记本 平板</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/notebook.webp" alt="" class="fl" />
            <span class="fl">小米笔记本 Pro 14 锐龙版</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">家电</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/fridge.webp" alt="" class="fl" />
            <span class="fl">冰箱</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">出行 穿戴</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/watch.webp" alt="" class="fl" />
            <span class="fl">Redmi 手表 2</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">智能 路由器</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/ai.webp" alt="" class="fl" />
            <span class="fl">CyberDog</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">电源 配件</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/power.webp" alt="" class="fl" />
            <span class="fl">移动电源</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">健康 儿童</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/health.webp" alt="" class="fl" />
            <span class="fl">米家跑步机</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">耳机 音箱</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/earphone.webp" alt="" class="fl" />
            <span class="fl">Redmi Buds 3 青春版</span>
          </a>
        </div>
      </li>
      <li>
        <div class="banner-menu-item clearfix">
          <span class="fl">生活 箱包</span>
          <i class="iconfont i-right fr"></i>
        </div>
        <div class="banner-sub-menu">
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
          <a href="" class="fl">
            <img src="./imgs/bag.webp" alt="" class="fl" />
            <span class="fl">小背包</span>
          </a>
        </div>
      </li>
    </ul>

  </div>
  <!-- 横幅结束 -->

  <!-- 横幅2开始 -->
  <div class="banner2 type-page clearfix">
    <!-- 广告 -->
    <div class="banner2-service fl">
      <a href="" class="fl">
        <i class="iconfont i-shijian"></i>
        保障服务
      </a>
      <a href="" class="fl">
        <i class="iconfont i-qiye"></i>
        企业团购
      </a>
      <a href="" class="fl">
        <i class="iconfont i-Fma"></i>
        F码通道
      </a>
      <a href="" class="fl">
        <i class="iconfont i-Sim-Card"></i>
        米粉卡
      </a>
      <a href="" class="fl">
        <i class="iconfont i-yijiuhuanxin"></i>
        以旧换新
      </a>
      <a href="" class="fl">
        <i class="iconfont i-chongzhi"></i>
        话费充值
      </a>
    </div>

    <!-- 子项 -->
    <a href="" class="banner2-item fl"><img src="./imgs/banner1.jpg" alt=""></a>
    <a href="" class="banner2-item fl"><img src="./imgs/banner2.jpg" alt=""></a>
    <a href="" class="banner2-item fl"><img src="./imgs/banner3.jpg" alt=""></a>
  </div>
  <!-- 横幅2结束 -->

  <!-- 主区域开始 -->
  <div class="main">

    <!-- 横幅3 开始 -->
    <a href="" class="banner3 type-page">
      <img src="./imgs/full-banner.webp" alt="">
    </a>
    <!-- 横幅3 结束 -->

    <!-- 橱窗开始 -->
    <div class="cc type-page">
      <!-- 顶部 -->
      <div class="cc-top clearfix">
        <!-- 主题 -->
        <h2 class="cc-title fl">手机</h2>
        <!-- 查看更多 -->
        <a href="" class="cc-more fr">
          <span>查看更多</span>
          <i class="iconfont i-right"></i>
        </a>
      </div>
      <!-- 展示区 -->
      <div class="cc-show clearfix">
        <!-- 左侧 -->
        <div class="cc-show-left fl">
          <a href="">
            <img src="./imgs/mobile-first.webp" alt="">
          </a>
        </div>

        <!-- 右侧 -->
        <div class="cc-show-right fl">
          <a href="" class="cc-right-item fl">
            <img src="./imgs/heisha.webp" alt="">
            <p class="cc-show-name">黑鲨4s Pro</p>
            <p class="cc-show-introduce">磁动力升降肩键</p>
            <p class="cc-show-price">4799元起</p>
          </a>
          <a href="" class="cc-right-item fl">
            <img src="./imgs/heisha.webp" alt="">
            <p class="cc-show-name">黑鲨4s Pro</p>
            <p class="cc-show-introduce">磁动力升降肩键</p>
            <p class="cc-show-price">4799元起</p>
          </a>
          <a href="" class="cc-right-item fl">
            <img src="./imgs/heisha.webp" alt="">
            <p class="cc-show-name">黑鲨4s Pro</p>
            <p class="cc-show-introduce">磁动力升降肩键</p>
            <p class="cc-show-price">4799元起</p>
          </a>
          <a href="" class="cc-right-item fl">
            <img src="./imgs/heisha.webp" alt="">
            <p class="cc-show-name">黑鲨4s Pro</p>
            <p class="cc-show-introduce">磁动力升降肩键</p>
            <p class="cc-show-price">4799元起</p>
          </a>
          <a href="" class="cc-right-item fl">
            <img src="./imgs/heisha.webp" alt="">
            <p class="cc-show-name">黑鲨4s Pro</p>
            <p class="cc-show-introduce">磁动力升降肩键</p>
            <p class="cc-show-price">4799元起</p>
          </a>
          <a href="" class="cc-right-item fl">
            <img src="./imgs/heisha.webp" alt="">
            <p class="cc-show-name">黑鲨4s Pro</p>
            <p class="cc-show-introduce">磁动力升降肩键</p>
            <p class="cc-show-price">4799元起</p>
          </a>
          <a href="" class="cc-right-item fl">
            <img src="./imgs/heisha.webp" alt="">
            <p class="cc-show-name">黑鲨4s Pro</p>
            <p class="cc-show-introduce">磁动力升降肩键</p>
            <p class="cc-show-price">4799元起</p>
          </a>
          <a href="" class="cc-right-item fl">
            <img src="./imgs/heisha.webp" alt="">
            <p class="cc-show-name">黑鲨4s Pro</p>
            <p class="cc-show-introduce">磁动力升降肩键</p>
            <p class="cc-show-price">4799元起</p>
          </a>
        </div>
      </div>
    </div>
    <!-- 橱窗结束 -->
  </div>
  <!-- 主区域结束 -->


  <!-- 页脚开始 -->
  <div class="footer">
    <!-- 顶部 -->
    <div class="footer-top type-page clearfix">
      <a class="fl" href="">
        <i class="iconfont i-weixiu1"></i>
        预约维修服务
      </a>
      <a class="fl" href="">
        <i class="iconfont i-7tianwuliyoutuihuo"></i>
        7天无理由退货
      </a>
      <a class="fl" href="">
        <i class="iconfont i-tian"></i>
        15天免费换货
      </a>
      <a class="fl" href="">
        <i class="iconfont i-liwu"></i>
        满69包邮
      </a>
      <a class="fl" href="">
        <i class="iconfont i-didian"></i>
        520余家售后网点
      </a>
    </div>

    <!-- 底部 -->
    <div class="footer-bottom type-page clearfix">
      <!-- 链接 -->
      <div class="footer-links fl">
        <h3>帮助中心</h3>
        <a href="">账号管理</a>
        <a href="">购物指南</a>
        <a href="">订单操作</a>
      </div>
      <div class="footer-links fl">
        <h3>服务支持</h3>
        <a href="">售后政策</a>
        <a href="">自助服务</a>
        <a href="">相关下载</a>
      </div>
      <div class="footer-links fl">
        <h3>线下门店</h3>
        <a href="">小米之家</a>
        <a href="">服务网点</a>
        <a href="">授权体验店/专区</a>
      </div>
      <div class="footer-links fl">
        <h3>关于小米</h3>
        <a href="">了解小米</a>
        <a href="">加入小米</a>
        <a href="">投资者关系</a>
        <a href="">企业社会责任</a>
        <a href="">廉洁举报</a>
      </div>
      <div class="footer-links fl">
        <h3>关注我们</h3>
        <a href="">新浪微博</a>
        <a href="">官方微信</a>
        <a href="">联系我们</a>
        <a href="">公益基金会</a>
      </div>
      <div class="footer-links fl">
        <h3>特色服务</h3>
        <a href="">F 码通道</a>
        <a href="">礼物码</a>
        <a href="">防伪查询</a>
      </div>

      <!-- 售后 -->
      <div class="footer-srvice fr">
        <h3>400-100-5678</h3>
        <p>8:00-18:00(仅收市话费)</p>
        <a href="">
          <i class="iconfont i-liaotian"></i>
          人工客服
        </a>
        <p>
          关注小米:
          <i class="iconfont i-xinlang"></i>
          <i class="iconfont i-weixin"></i>
        </p>
      </div>


    </div>
  </div>
  <!-- 页脚结束 -->

  <!-- 右侧固定菜单开始 -->
  <div class="rm">
    <a href="" class="rm-item rm-item-app">
      <i class="iconfont i-tel"></i>
      <span class="rm-title">手机APP</span>

      <div class="rm-item-pop">
        <img src="./imgs/qrcode.png" alt="">
        <p>扫码领取新</p>
        <p>人百元礼包</p>
      </div>
    </a>
    <a href="" class="rm-item">
      <i class="iconfont i-yonghu"></i>
      <span class="rm-title">个人中心</span>
    </a>
    <a href="" class="rm-item">
      <i class="iconfont i-weixiu1"></i>
      <span class="rm-title">售后服务</span>
    </a>
    <a href="" class="rm-item">
      <i class="iconfont i-kefu"></i>
      <span class="rm-title">人工客服</span>
    </a>
    <a href="" class="rm-item">
      <i class="iconfont i-car"></i>
      <span class="rm-title">购物车</span>
    </a>
    <a href="javascript:scrollTo(0, 0)" class="rm-item">
      <i class="iconfont i-dingbu"></i>
      <span class="rm-title">回到顶部</span>
    </a>
  </div>
  <!-- 右侧固定菜单结束 -->


</body>

</html>